<template>
	<view>
		<view class="playing_compoents">
			<view class="icon">
				<image :src="PlayWay" mode="widthFix" 
				@tap="hanlePlayWay"  />
			</view>
			<view class="icon">
				<image src="../../../static/playing/ajh.png" class="temp" mode="widthFix"
				@tap="hanlelast"  />
			</view>
			<view class="icon">
				<image :src="zzPlay?'../../../static/playing/ajd.png':'../../../static/playing/ajf.png'"
				 @tap="handleAudioPlay" class="temp" mode="widthFix" />
			</view>
			<view class="icon">
				<image src="../../../static/playing/ajb.png" class="temp" mode="widthFix"
				@tap="hanlenext"  />
			</view>
			<view class="icon">
				<image src="../../../static/playing/cm2_icn_list@2x.png" mode="widthFix" 
				@tap="playlistOpen"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	let audioCtx=uni.getBackgroundAudioManager();
	let app=getApp();
	export default {
		computed: {
			...mapState(['zzPlay','playwaynum','Id','playIdList']),
		},
		data() {
			return {
				isshuffle:false,
				isloop:true,
				PlayWay:'../../../static/playing/cm2_icn_loop@2x.png',
			}
		},
		created() {
			//注册操作事件
			this.getCompoents();
			//判断是播放顺序
 			switch(this.playwaynum) {
				case 1:
					this.PlayWay='../../../static/playing/cm2_icn_loop@2x.png'
					this.isshuffle=false,
					this.isloop=false
				break;
				case 2:
					this.PlayWay='../../../static/playing/cm2_icn_shuffle@2x.png';
					this.isshuffle=true;
					this.isloop=false;
				break;
				case 3:
					this.PlayWay='../../../static/playing/cm2_icn_one@2x.png';
					this.isshuffle=false,
					this.isloop=true
				break;
			}
			//非自然结束播放下一首
			app.watchend(this.watchBackend);
		},
		methods: {
			//非自然结束播放下一首
			watchBackend(value){
				uni.showToast({
					title: '为您播放下一首',
					icon: 'success',
				});
				this.hanlenext();
			},
			//注册操作事件
			getCompoents(){
				audioCtx.onPlay(() => {
					/* console.log("开始播放"); */
					this.$store.commit('isPlay', true)
					this.$emit('play')
				})
				//监听暂停事件
				audioCtx.onPause(()=>{
					/* console.log("暂停播放"); */
					this.$store.commit('isPlay', false)
				})
				//注册结束事件
				audioCtx.onEnded(()=>{
				   this.handleIsshuffle()
				})
			},
			//设置新的音乐src 
			getMusicSrc(id,Single){
				this.$emit('setId',id,Single)
			},
			//处理播放顺序
			hanlePlayWay(){
				let {PlayWay}=this;
				let {playwaynum}=this;
				if(playwaynum==1){
				  playwaynum+=1;
				  PlayWay='../../../static/playing/cm2_icn_shuffle@2x.png'; 
				  uni.showToast({
				    title: '随机播放',
				    icon: 'success',
				  });
				  this.isshuffle=true;
				  this.isloop=false;	
				}
				else if (playwaynum==2){
				    playwaynum+=1;
				    PlayWay='../../../static/playing/cm2_icn_one@2x.png';
				    wx.showToast({
						title: '单曲循环',
						icon: 'success',
				    });
				    this.isshuffle=false,
				    this.isloop=true
				}
				else{
				    playwaynum=1
				    PlayWay='../../../static/playing/cm2_icn_loop@2x.png';
				    uni.showToast({
						title: '列表循环',
						icon: 'success',
				    });
				    this.isshuffle=false,
				    this.isloop=false
				}
				this.PlayWay=PlayWay;
				this.$store.commit('setPlaywaynum', playwaynum)
			},
			//上一曲
			hanlelast(){
				let {isshuffle}=this;
				let {playIdList}=this;
				if(this.playIdList.length<2){
					uni.showToast({
						title: '此曲为单曲',
						icon: 'none',
					});					
				}
				else if(isshuffle){
					this.shuffle()
				}
				else{
					let id=this.Id;
					let length=playIdList.length;
					let index = playIdList.findIndex(v=>v==id);
					id=index==0?playIdList[length-1]:playIdList[index-1];
					this.getMusicSrc(id);
				}
			},
			//暂停事件
			handleAudioPlay(){
				let {zzPlay}=this;
				if(zzPlay){	
					audioCtx.pause();
				}
				else{
					audioCtx.play();
				}
			},
			//下一曲
			hanlenext(){			
				let {isshuffle}=this;
				let {playIdList}=this;
				if(this.playIdList.length<2){
					uni.showToast({
						title: '此曲为单曲',
						icon: 'none',
					});
					this.getMusicSrc(this.Id,true);
				}
				else if(isshuffle){
				    this.shuffle()
				}
				else{
					let id=this.Id;
					let length=playIdList.length;
					let index = playIdList.findIndex(v=>v==id);
					id=index==length-1?playIdList[0]:playIdList[index+1];
					this.getMusicSrc(id,false);
				}
			},
			//打开播放列表
			playlistOpen(){
				this.$emit('plOpen')
			},
			//随机播放事件
			shuffle(){
				let id=this.Id;
			    let {playIdList}=this;
			    let length=playIdList.length;
				if(length<2){
					this.getMusicSrc(this.Id,true);
					return;
				}
			    if(length==1){
			      id=playIdList[0];
			    }else{
			      do{
			        var index=this.GetRandomNum(0,length);
			      }
			      while ( (id==playIdList[index])||(index>=playIdList.length) ) 
			      id=playIdList[index]
			    }
				this.getMusicSrc(id,false);
			  },
			//随机函数
			GetRandomNum(Min, Max) {
			    var Range = Max - Min;
			    var Rand = Math.random();
			    return(Min + Math.round(Rand * Range));
			},
			//播放结束事件
			handleIsshuffle(){
				let {isshuffle}=this;
				let {isloop}=this;
				    if(isloop){
						this.getMusicSrc(this.Id,true);
				    }
				    else{
				      if(isshuffle){
				        this.shuffle();
				      }
				      else{
				        this.hanlenext();
				      }
				}
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.playing_compoents{
		width: 100%;
		position: absolute;
		z-index: 6;
		bottom: 0;
		left: 0;
		display: flex;
		.icon{
			flex: 1;
			display: flex;
			align-items: center;
			image{
				width: 100%;
			}
			.temp{
				width: 70%;
				transform: translateX(15%);
			}
		}
	}
</style>
